import { Input, Select } from "antd"
import styled from "styled-components"

import { SFormItem } from "@/components/common"
import { useLocale } from "@/locales"

const PHONE_PREFIX = [
	{
		label: "+86",
		value: 86
	},
	{
		label: "+63",
		value: 63
	}
]

const PhoneNumContainer = styled.div`
	display: flex;
	gap: 5px;
`

export const PhoneInput = ({
	placeholder,
	normalize
}: {
	placeholder?: string
	normalize?: ((value: any, prevValue: any, allValues: any) => any) | undefined
}) => {
	const { formatMessage } = useLocale()

	return (
		<PhoneNumContainer>
			<SFormItem name="phoneNoPrefix" label={formatMessage({ id: "common.hand_phone_number" })}>
				<Select options={PHONE_PREFIX} />
			</SFormItem>

			<SFormItem {...(normalize ? { normalize } : {})} name="phoneNumber">
				<Input
					maxLength={11}
					placeholder={formatMessage({ id: placeholder ? placeholder : "common.hand_phone_number" })}
					allowClear
				/>
			</SFormItem>
		</PhoneNumContainer>
	)
}
